<template>
    <!-- 辅助空白 -->
    <view class="diy-shop">
        <view class="shop-item" v-for="(dataItem, index) in dataList" :key="index">
            <form @submit="_onTargetDetail">
                <button formType="submit" class="btn-normal dis-flex flex-y-center" :data-id="dataItem.shop_id">
                    <view class="shop-item__logo">
                        <image class="image" :src="dataItem.logo_image"></image>
                    </view>
                    <view class="shop-item__content flex-box">
                        <view class="shop-item__title">
                            <span>{{ dataItem.shop_name }}</span>
                        </view>
                        <view class="shop-item__address onelist-hidden">
                            <span>门店地址：{{ dataItem.region.province }}{{ dataItem.region.city }}{{ dataItem.region.region }}{{ dataItem.address }}</span>
                        </view>
                        <view class="shop-item__phone">
                            <span>联系电话：{{ dataItem.phone }}</span>
                        </view>
                    </view>
                </button>
            </form>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            dataItem: {
                shop_id: '',
                logo_image: '',
                shop_name: '',

                region: {
                    province: '',
                    city: '',
                    region: ''
                },

                address: '',
                phone: ''
            }
        };
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        dataList: Object
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 跳转门店详情页
         */
        _onTargetDetail(e) {
            // 记录formid
            app.saveFormId(e.detail.formId);
            uni.navigateTo({
                url: '/pages/shop/detail/index?shop_id=' + e.detail.target.dataset.id
            });
        }
    }
};
</script>
<style lang="scss">
/* common.wxss */
/* @import "../../../utils/common.scss"; */

/* 线下门店 */

.shop-item {
    padding: 16rpx 30rpx;
    min-height: 180rpx;
    font-size: 26rpx;
    line-height: 1.5;
    border-bottom: 1rpx solid #eee;
    box-sizing: border-box;
}

.shop-item__logo {
    margin-right: 30rpx;
}

.shop-item__logo .image {
    display: block;
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1); */
}

.shop-item__title {
    font-size: 28rpx;
    color: #fd4a5f;
    margin-bottom: 10rpx;
}

.shop-item__address,
.shop-item__phone {
    color: #919396;
}

.shop-item__address {
    width: 520rpx;
}

.shop-item__distance {
    margin-top: 10rpx;
    color: #c1c1c1;
    height: 40rpx;
}

.shop-item__distance .iconfont {
    color: #81838e;
    margin-right: 6rpx;
}
</style>
